<template>
	<view>
		<view class="title">
			<view style="margin-top: 10rpx;">
				<image :src="switchImg(gImages)" class="goods-img"></image>
			</view>
			<view>
				<view class="qian">{{money}}</view>
				<view class="comany">携联健康养生</view>
			</view>
		</view>
		<view style="width: 92%;margin: auto;" @click="goPay()">
			<button class="confirm-btn">确认支付<text style="font-size: 20px;padding-left: 10rpx;">￥{{money}}</text></button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ddhao:"",	// 中间的订单编号
				money:"",	// 应付金额
				gImages:"",	// 商品图片
				userid:'',	// 用户ID
			}
		},
		methods: {
			// 设置图片路径
			switchImg(s){
				return this.host+s;
			},
			// 去支付
			goPay(){
				if(this.isNull(this.ddhao)){
					this.$u.toast("请稍后。。。");
				}else if(this.isNull(this.userid)){
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'login'
						})
					},500)
				}else{
					console.log("点击确认支付了")
					this.$http.get('/xielianpay.do',{
						p:'payjifenxcx',
						userid:uni.getStorageSync('usersId'),
						unionid:this.ddhao,
						openId:uni.getStorageSync('openId')
					}).then(res => {
						console.log(res.data)
						if(res.data.code==200){
							let that = this;
							let ddhao = res.data.data.ddhao;
							uni.requestPayment({
								appid: res.data.data.appId,  			// AppId，注意微信小程序、公众号 AppId 可能不一致
								nonceStr: res.data.data.nonceStr, 		// 随机字符串
								package: res.data.data.package,         // 固定值
								signType: res.data.data.signType,		// 签名类型
								timeStamp: res.data.data.timeStamp,     // 时间戳（单位：秒）
								paySign:res.data.data.paySign,
							    success(res) {
									uni.showToast({
										title: '支付成功',
										icon: 'success'
									});
									//支付成功修改订单状态
									that.$http.get('/xielianpay.do/xcxNotify',{
										orderId:ddhao
									}).then(res => {
										//支付成功，跳转页面
										uni.$emit('checkUserInfo');
										uni.$emit('getOrderByGroup');
										uni.switchTab({
											url:'../center/index'
										})
										// uni.navigateBack(2)
									})
								},
							    fail(e) {
									// console.log(e)
									uni.showToast({
										title: '支付失败',
										icon: 'error'
									});
								}
							})
						}else{
							this.$u.toast(res.data.msg)
						}
					})
				}
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
		onLoad(opt){
			this.$http.get('/xieliangoods.do?p=goodsdetail', {
				"id":opt.gid
			}).then(res => {
				this.gImages = res.data.goods.gImages
			})
			let userid = uni.getStorageSync("usersId");
			this.userid = userid;
			let orid = opt.orid;
			console.log("订单ID："+orid+" 商品ID="+opt.gid+" 用户ID："+userid)
			this.$http.get('/xielianorder.do?p=getAllOrderByUidMoney', {
				'userid':userid,
				'orid':orid
			}).then(res => {
				this.ddhao = res.data.ddhao;
				this.money = res.data.money;
			})
		}
	}
</script>

<style scoped>
	.title{
		display: flex;
		justify-content: center;
		background-color: white;
		padding: 40rpx 0rpx;
		margin-bottom: 20rpx;
	}
	.comany{
		font-size: 24rpx;
		/* color: #DCDFE6; */
	}
	.title>view{
		margin-left: 30rpx;
	}
	.title>view>view{
		margin-top: 10rpx;
	}
	.qian{
		font-size: 20px;
	}
	.confirm-btn .qian{
		font-size: 26rpx;
	}
	.confirm-btn{
		background-color: #ff9c05;
		color: white;
		margin: 0px 10rpx;
		height: 70rpx;
		font-size: 26rpx;
		line-height: 70rpx;
	}
	.goods-img{
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
	}
	.qian::before{
		content: '￥';
	}
</style>
